<template>
  <div id="app" class="flex-row">
    <div class="left-content">
      <div class="flex-row">
        <div class="wrap">
          <p style="background: #6aa84f">html</p>
          <monaco-edito
            ref="html"
            width="500px"
            height="290px"
            language="html"
          ></monaco-edito>
        </div>
        <div class="wrap">
          <p style="background: #cc4125">css</p>
          <monaco-edito
            ref="css"
            width="500px"
            height="290px"
            language="css"
          ></monaco-edito>
        </div>
      </div>
      <div class="wrap">
        <p style="background: #f1c232">js</p>
        <monaco-edito ref="js" height="260px"></monaco-edito>
      </div>
    </div>
    <div class="right-content">
      <button @click="runCode">运行</button>
      <p>实现结果：</p>
      <iframe class="view-panel" id="preview" frameborder="0"></iframe>
      <!-- <div class="result">
        
      </div> -->
    </div>
  </div>
</template>

<script>
import MonacoEdito from "./components/monaco-editor.vue";

export default {
  name: "app",
  components: {
    MonacoEdito,
  },
  methods: {
    runCode() {
      var html = this.$refs.html.monacoEditor.getValue();
      var css = this.$refs.css.monacoEditor.getValue();
      var js = this.$refs.js.monacoEditor.getValue();

      let code = `
        <!DOCTYPE html>
        <html lang="en">

        <head>
      	  <meta charset="UTF-8">
      	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
      	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      	  <title>Editor</title>
      	  <style>${css}</style>
        </head>
        <body>${html}</body>
        <script>${js}<\/script>
        </html>
      `;
      console.log(code);
      const preview = document.getElementById("preview");
      preview.setAttribute("srcdoc", code);
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  /* overflow: hidden; */
  /* width: 100vw;
  height: 100vh; */
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.result {
  /* width: 100%;
  height: 100%; */
  border: 1px solid #ccc;
  width: 100%;
  height: 500px;
}

.left-content {
  width: 1000px;
}

.right-content {
  margin-left: 15px;
  padding: 10px;
  width: 100%;
  /* background: red; */
}

.wrap {
  display: flex;
  flex-direction: column;
}

.wrap p {
  padding: 5px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.right-content p {
  margin: 5px 0;
}

button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  color: #ffffff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
</style>
